{#
Required Input:
    component: {id, title, ta_comment, student_comment, page, lower_clamp, default, max_value, upper_clamp}
    edit_marks_enabled: If the marks table should be in edit mode
    show_mark_list: If the marks table should be started hidden or not
#}

{% set mark_list_visibility = show_mark_list ? '' : 'hidden' %}
<div id="component-{{ component.id }}"
     class="box component"
     data-component_id="{{ component.id }}"
     data-title="{{ component.title|escape }}"
     data-ta_comment="{{ component.ta_comment|escape }}"
     data-student_comment="{{ component.student_comment|escape }}"
     data-page="{{ component.page }}"
     data-lower_clamp="{{ component.lower_clamp }}"
     data-default="{{ component.default }}"
     data-max_value="{{ component.max_value }}"
     data-upper_clamp="{{ component.upper_clamp }}">

    {# Title bar (only part that triggers collapse on click) #}
    <div class="box-title container">
        <div class="row header-block" onclick="{% block component_click %}{% endblock %}">
            {% block header_block %}
            {% endblock %}
        </div>
        <div class="row content-block {{ mark_list_visibility }}">
            {% block content_block %}
            {% endblock %}
        </div>
    </div>
    {# /Title bar #}

    {# Marks table #}
    <div class="ta-rubric-table" data-component_id="{{ component.id }}" {{ mark_list_visibility }}>
        {# twig.js doesn't support blocks inside of for loops ... ANNOYING #}
        {% block marks_block %}
        {% endblock %}
        {% if edit_marks_enabled %}
            <div class="add-new-mark-container">
                <input type="button" class="btn btn-primary add-new-mark" value="Add New Mark" onclick="onAddNewMark(this)"/>
            </div>
        {% endif %}
        {% block extra_mark_rows %}
        {% endblock %}
    </div>
    {# /Marks table #}

    {% block mark_list_footer %}
    {% endblock %}
</div>